	<style>
	#projects{
		border:1px white solid;
		overflow:hidden;
	}
	.project{
		height:80px;
		background-color:skyblue;
		text-align:left;
		font-size:1.5em;
	}
	.projectName{
		display:block;
		float:left;
		border-right:1px white solid;
		text-align:center;
		width:64px;
		height:64px;
		background-image:url('default.png');
		background-size:100% 100%;
	}
	.projectSrc{
		display:block;
	}
	.descibe{
		display:block;
	}
	.selected{
		border:2px red solid;
	}
	</style>
	<div class="easyui-layout" fit="true">
		<div data-options="region:'center'">
			<div id="projects"></div>
		</div>
		<div data-options="region:'south'" style="height:50px;overflow:hidden">
			<button id="newbtn">New</button>
			<button id="openbtn">Open</button>
			<button id="removebtn">Remove</button>
		</div>
	</div>
	<script>
	$(document).ready(function(){
		//var win = $('#dd').dialog();
		var editor = edt;//win.editor;
		var projectfile = editor.system.projectFile;
		var projects = editor.project.projects;
		
		for (var key in projects) {
			var project = projects[key];
			if (project != null)
				var projectdiv = "<div class='project'>" +
					"<span class='projectName'>" + project.name + "</span>" +
					"<span class='projectDir'>" + project.path + "</span>" +
					"<span class='descibe'>" + project.describe + "</span>" +
					"</div>"
					$('#projects').append(projectdiv);
		}
		$(".project").click(function (e) {
			var selected = $(".selected");
			if (selected.length > 0)
				selected.removeClass("selected");
			$(this).addClass("selected");
		});
		$("#newbtn").click(function () {
			var dialog = editor.ui.showNewProjectDialog();
			win.close();
		});
		$("#openbtn").click(function () {
			var selected = $(".selected");
			var project = {};
			project['name'] = selected.children(".projectName")[0].innerHTML;
			project['path'] = selected.children(".projectDir")[0].innerHTML;
			editor.project.load(project);
			$('#dd').dialog('close');
		});
		$("#removebtn").click(function () {
			var r = confirm("Are you comfirm to remove this project?");
			if (r == true) {
				var selected = $(".selected");
				var name = selected.children(".projectName")[0].innerHTML;
				var dir = selected.children(".projectDir")[0].innerHTML;
				for (var i in projects) {
					if (projects[i].name == name) {
						editor.project.remove(i);
						break;
					}
				}
				selected.remove();
			} else {
				alert("Cannot remove the project");
			}
		});
	});
	</script>